// pages/index/soundCard/soundCard.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgPath: '', // 输出图片路径
    soundPath: '', // 输出录音路径
    isX: false, // 是否横向显示
    isModelA: false,
    isModelB: true,
    movableH: 0, // 相框高
    movableW: 0, // 相框宽
    imgWidth: 0, // 图片原始宽度
    imgHeight: 0, // 图片原始高度
    dragX: 0, // X轴拖动
    dragY: 0, // Y轴拖动
    scale: 1, // 缩放比例
    min: '00',
    sec: '00',

    //改变背景色
    pageBackgroundColor: 'yellow',

    //弹窗组件所需字段

    showDialog: false, //自定义图片验证弹窗是否显示

  },
  onLoad: function(options) {
    let that = this,
      h,
      w
    wx.getImageInfo({ // 获取图片信息
       src: options.path,
  
      success: function(res) {
        w = 550
        h = res.height / res.width * w
        that.setData({
          // isX: res.width > res.height ? true : false,
           imgPath: options.path,
         
          movableH: h,
          movableW: w,
          imgWidth: res.width,
          imgHeight: res.height
        })
      }
    })
  },

  changeColor: function() {
    var bgColor = this.data.pageBackgroundColor == 'red' ? '#5cb85c' : 'red';
    // 设置背景颜色数据
    this.setData({
      pageBackgroundColor: bgColor
    });
  },

  //切换照片
  changePicture:function(e){
    var that = this
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths
        console.log(tempFilePaths)
        // that.previewPic(tempFilePaths)
          that.setData({
            imgPath: tempFilePaths
          })
      }
    })
  },


  //实现模板的动态切换
  chageModel(e) {
    let query = e.currentTarget.dataset['index'];
    if (query === "modelA") {
      this.setData({
        isModelA: false,
        isModelB: true
      })
    }
    if (query === "modelB") {
      this.setData({
        isModelB: false,
        isModelA: true
      })
    }

  },

  editPic:function(e){
    wx.navigateTo({
      url: '../' + e.currentTarget.dataset.page + '/' + e.currentTarget.dataset.page

    })
  },

  //弹窗是否显示
  toggleDialog() {
    this.setData({
      showDialog: !this.data.showDialog
    });

  },

  dragImg(e) { // 拖动
    console.log('1', e.detail)
    this.setData({
      dragX: e.detail.x,
      dragY: e.detail.y
    })
  },
  scaleImg(e) { // 缩放
    console.log('2', e.detail)
    this.setData({
      dragX: e.detail.x,
      dragY: e.detail.y,
      scale: e.detail.scale
    })
  },
  cancel() { // 取消
    wx.navigateBack({})
  },
  outputSoundCard() { // 确定
    let that = this,
      h = this.data.movableH / 2,
      w = this.data.movableW / 2, //rpx -> px
      photoW = 300,
      photoH = 420
    let ctx = wx.createCanvasContext('picBox') // 创建上下文
    ctx.drawImage(
      this.data.imgPath,
      this.data.dragX / w * this.data.imgWidth,
      this.data.dragY / h * this.data.imgHeight,
      this.data.imgWidth * this.data.scale,
      this.data.imgHeight * this.data.scale
    )
    ctx.draw() // 绘制
    console.log(this.data.imgPath)
    setTimeout(() => { // 绘制有延迟
      wx.canvasToTempFilePath({
        canvasId: 'picBox',
        destWidth: 1100,
        destHeight: 1700,
        quality: 1,
        success: function(res) {
          console.log(res.tempFilePath)
        }
      })
    }, 500)
  }
})